<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" :title="type == 'create' ? '添加标签' : '修改标签'" width="1200px"
            :before-close="handleClose">
            <el-form :model="form" label-width="120px">
                <el-form-item label="标题">
                    <el-input placeholder="请输入标题" style="width: 500px" v-model="form.title"></el-input>
                </el-form-item>

                <!-- <el-form-item label="内容">
                    <el-input placeholder="请输入内容" style="width: 500px" v-model="form.content"></el-input>
                </el-form-item> -->

                <el-form-item label="版本名称">
                    <el-input placeholder="请输入版本名称" style="width: 500px" v-model="form.version_name"></el-input>
                </el-form-item>

                <el-form-item label="版本编码">
                    <el-input placeholder="请输入版本编码(数字)" type="number" style="width: 500px"
                        v-model="form.version_code"></el-input>
                </el-form-item>

                <el-form-item label="下载地址">
                    <el-input placeholder="上传自动生成下载地址" style="width: 500px" v-model="form.download_url"
                        :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="上传陪秀" v-if="form.version_name">
                    <el-upload :accept="videoAccept" :auto-upload="false" :disabled="loading" :on-change="toUpload"
                        v-if="visible" action="#999" class="" drag>
                        <div class="" style="margin-top: 70px;">
                            <div class="color-999 font-15 pr-4" v-if="!loading">点击上传陪秀</div>
                            <div class="color-999 font-15 pr-4" v-else>上传中...(进度{{ percent }}%)</div>
                        </div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="内容" v-if="visible">
                    <VueEditor v-if="visible" v-model="form.content" class="VueEditor"></VueEditor>
                </el-form-item>
                <el-form-item label="是否自动更新">
                    <el-switch @change="showFun" active-color="#13ce66" inactive-color="#999" v-model="show"></el-switch>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary" :loading="submitComplete">确 定</el-button>
            </div>
        </el-dialog>

        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入标题" size="small" style="width: 200px;" v-model="query.title"></el-input>
            <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.content"></el-input>
            <el-input clearable placeholder="请输入版本名称" size="small" style="width: 200px;"
                v-model="query.version_name"></el-input>
            <el-input clearable placeholder="请输入版本编码(数字)" size="small" style="width: 200px;" v-model="query.version_code"
                type="number"></el-input>
            <el-select placeholder="选择是否更新" v-model="query.is_auto">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button @click="page = 1; init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="toForm()" size="small" type="success" v-permission="['ADMIN', 'ANDROID_ADD']">添加</el-button>
            <el-button @click="page = 1; init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="内容" prop="content">
                    <template slot-scope="scope">
                        <div v-html="scope.row.content"></div>
                    </template>

                </el-table-column>
                <el-table-column label="版本编码" prop="version_code"></el-table-column>
                <el-table-column label="版本名称" prop="version_name"></el-table-column>
                <el-table-column label="下载地址" prop="download_url">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.download_url }}
                            <i @click="copy(scope.row.download_url)" class="el-icon-document-copy"
                                style="font-size: 20px;cursor: pointer;"></i>
                        </div>
                    </template>


                </el-table-column>
                <el-table-column label="自动更新" prop="is_auto">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_auto == '1'" type="success">是</el-tag>
                        <el-tag v-else-if="scope.row.is_auto == '0'" type="danger">否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary" style="padding: 10px"
                            v-permission="['ADMIN', 'ANDROID_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger" style="padding: 10px"
                                v-permission="['ADMIN', 'ANDROID_DELETE']">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
import uploadData from '@/mixins/upload'
import VueEditor from '@/components/Editor/index'
export default {
    name: "android-version",
    mixins: [initData, uploadData],
    components: {
        treeSelect,
        medium,
        VueEditor
    },
    data() {
        return {
            query: {
                title: '',
                content: '',
                version_name: '',
                version_code: '',
                is_auto: ''
            },
            show: true,
            showUP: false,
            form: {
                title: '',
                content: '',
                is_auto: 1,
                version_code: null,
                version_name: '',
                download_url: ''
            },
            visible: false,
            loading: false,
            data: [],
            page: 1,
            tableData: [],
            type: 'create',
            worksId: '',
            options: [
                {
                    label: '是',
                    value: '1',
                },
                {
                    label: '否',
                    value: '0',
                }
            ],

            submitComplete: false,
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
        this.videoAccept = '.apk'
    },
    methods: {
        beforeInit() {
            this.url = '/andriod-version/index'
            this.init() //重新请求数据
        },

        destroySpecificComponent() {
            

            let result =  document.getElementsByName('editorValue')

            console.log('result',result)

            if(result.length > 0){
                result[0].remove()
            }
            
        },

        showFun(res) {
            console.log(res)
            this.form.is_auto = res ? 1 : 0
            this.show = res
        },

        copy(text) {
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message.success('复制成功')
        },

        del(id) {
            this.$request.del('/andriod-version/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.worksId = form.id
                form.is_auto == 0 ? this.show = false : this.show = true
                this.form = form
                console.log('this.form', this.form)
                console.log('form', form)
            } else {
                console.log('添加')
                this.type = 'create'
                this.worksId = ""
                this.form = {
                    title: '',
                    content: '',
                    is_auto: 1,
                    version_code: null,
                    version_name: '',
                    download_url: ''
                }

                this.show = true
            }
      
        },

        handleClose() {
            this.closeBox()
        },
        closeBox() {
            this.destroySpecificComponent()
            this.type = 'create'
            this.visible = false

            this.form.is_auto = 1
            // this.show = true
            this.form = {
                title: '',
                content: '',
                is_auto: 1,
                version_code: null,
                version_name: '',
                download_url: ''
            }
            this.form.content = ''
            
            this.init()
        },


        //提交
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.title && this.form.content && this.form.version_code && this.form.version_name && this.form.download_url)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/andriod-version/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });

                    this.init() //重新请求数据
                    this.closeBox()
                    this.submitComplete = false
                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/andriod-version/update/' + this.worksId, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.init() //重新请求数据
                    this.closeBox()
                    this.submitComplete = false

                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>